<template>
    <div class="active-singer-item" @click="getRouterToArtistInfo(id)">
        <div class="item-img">
            <n-image
                width="76"
                height="77"
                :src="picUrl"
            />
        </div>
        <div class="item-info">
            <p class="item-singer-name">{{ name }}</p>
            <p>{{ info }}</p>
        </div>
    </div>
</template>

<script>
import {NImage, useNotification} from 'naive-ui';
import {useRouter} from "vue-router";

export default {
    name: "ActiveSingerItem",
    components: {
        NImage
    },
    props: {
        name: String,
        info: String,
        picUrl: String,
        id: Number
    },
    setup() {
        const router = useRouter();
        // 通知组件
        const notification = useNotification();
        // 跳转到歌手详情页面
        const getRouterToArtistInfo = (id) => {
            if (id === 0) {
                notification['error']({
                    content: '获取到的用户id错误',
                    meta: '切勿重复点击'
                })
                return;
            } else {
                router.push({path: '/artist', query: {id}});
            }
        }
        return {
            getRouterToArtistInfo
        }
    }
}
</script>

<style scoped lang="scss">
.active-singer-item {
    @apply flex border-2 my-4 hover:bg-gray-200 cursor-pointer;
    height: 80px;
    
    .item-info {
        @apply mx-4 my-auto;
        color: #666666;
        
        .item-singer-name {
            @apply font-bold text-black py-4;
        }
    }
}
</style>